<template>
	<div id="findNav">
		<ul class="findList">
			<li v-for="item in List" :key="item.id">
				<router-link active-class="active" :to="`/find/${item.path}`">{{item.text}}</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name: "findNav",
		props: ["currentId"],
		data() {
			return {
				current: 1,
				List: [{
						id: '1',
						text: '交流圈',
						path: 'jiaoliu'
					},
					{
						id: '2',
						text: '灵感',
						path: 'linggan'
					},
					{
						id: '3',
						text: '联名',
						path: 'lianMing'
					},
					{
						id: '4',
						text: '设计师',
						path: 'design'

					},
				]
			};
		},
		methods: {

		},
		mounted() {
			// this.$router.push({
			// 	path: '/find/jiaoliu',
			// 	query: {
			// 		bottomIndex: 2,
			// 		index: 0
			// 	}
			// })
		}

	}
</script>

<style>
	#findNav {
		background: #FAF8F8;
		height: 0.5rem;
	}

	#findNav .findList {
		display: flex;
		background-color: #FFFFFF;
		height: 0.48rem;
	}

	#findNav .findList li {
		font-size: 0.14rem;
		font-weight: bold;
		opacity: 1;
		margin-left: 0.56rem;
		margin-top: 0.11rem;
	}

	#findNav .findList li:nth-child(1) {
		margin-left: 0.32rem;
	}

	#findNav .findList .present2 {
		display: inline-block;
		height: 0.4rem;
		text-align: center;
		color: red;
		background: url(../../assets/img/down-pickers.png);
		background-repeat: no-repeat;
		background-size: 0.2rem 0.06rem;
		background-position: center 0.3rem;

	}

	.active {
		color: red;
	}
</style>
